cc-pocket · mobile ui 2.0 · supporting surfaces · master

Supporting Surfaces Master v1

The implementation handoff for Fleet, Review Center and Settings. One device component and one state machine drive every frame on this board, so each is live: switch computers, open a request, answer it, move between tabs, drill into a category and come back. Theme, locale and text size are real runtime state, not separate mockups.

live prototype
402 × 874 · 1:1
10 routes
3 machine states
2 audit fixes
no new facts
Corrected · three machine states, not four

MachineStatus is exactly ONLINE, RECONNECTING and OFFLINE. The direction board's fourth mark, “No state reported”, is gone — no machine row, legend or note describes a fourth connection state. A ring still appears in review vocabulary for Queued and Closed, which is a different enum on a different surface and never sits on a machine row.

Corrected · coarse OS enum, no version

Rows print the coarse enum the Fleet model actually carries — macOS, Linux — and nothing more. “macOS 15.3” and “Ubuntu 24.04” are removed, and no replacement fact took their place: the second line simply gets shorter. A machine that reports no OS shows no OS line at all.

Unchanged from the direction

Standard back, large title, factual summary, low-container rows, 20 pt gutter, restrained orange accent, written status beside a shape, 44 pt minimum targets and dynamic-height rows. No latency, health, battery, score or trend anywhere. Deeper screens keep their current designs and are reached as named passthroughs.

A

Walk the surfaces

Opens on Computers. The rail is host chrome for review, not product UI.
Acceptance paths
01Tap a non-current computer — the skeleton transition runs, then Computers returns with the new machine marked Current.
02Tap the attention strip → Attention. A pending row opens the request detail; Allow and Deny live only there, never on the list row.
03Answer either way — the log records ALLOW or DENY and returns to Attention. Semantics are the existing ones; nothing new is sent.
04Cycle the attention fixture through ready, empty, loading and disconnected. Each replaces the list region only; the header holds still.
05In Review, move across Inbox, Sent and Contacts. Rows open a detail-shaped view; Contacts adds Invite and Join, and its detail adds fingerprint and remove-contact.
 
06Cycle the review fixture through its six conditions. Loading, empty, offline, unsupported and error each say something different and only error offers Retry.
07In Settings, open each of the five categories and return. Every control is the existing one, and rows that lead to a full screen say Opens.
08Open Usage, Schedule, Shared Folders, Collaborators, Bridges, Help, New review, Invite, Join or Pair — each is a named passthrough that returns exactly where it came from.
09Back is predictable from every route: request → Attention → Computers → Projects, detail → Review, category → Settings.
10Flip appearance, locale and text 200% on any route. The same component re-renders; nothing is a separate mockup.
Prototype boundaries

Projects is a stub whose only job is to hold the three doorways — the real one is Entry Flow Master v2. Pickers log their choice rather than opening a wheel. Passthrough screens name themselves and stop. Every value is a fixture chosen to stress layout.

B

Required states

Each frame is independently live — drive one without disturbing the others.
01 · Fleet · mixed + attention strip
Three states, three marks, each beside its word. The coarse OS enum only. Last seen appears just where the machine is not online; the badge counts pending approvals and hides at zero. Tapping any row switches computer.
02 · Attention · pending + finished
Pending first, finished second, split by a written label rather than a colour change. Rows carry computer, tool, title, preview and elapsed — and open a detail region rather than deciding in place.
03 · Request detail · Allow / Deny
The decision happens where the request is legible. Tool and preview are monospace and wrap on characters; the two actions are pinned and equal in height, with only Allow filled.
04 · Review · Inbox
Delivered and In progress need a response and lead. Responded and Closed sit below. Five protocol words only; sender names and titles stay literal.
05 · Review · Sent · honest Queued
Queued says not delivered yet and prints its age beside it. Age never promotes a review to Delivered. New review is the pinned action on this tab only.
06 · Review · unsupported
Unsupported is not an error and offline is not an empty list. Four conditions, four sentences, and Retry only where retrying can help.
07 · Settings · landing
Computer summary only when supplied, two utilities, five categories. Token usage says this month and defers to the existing Usage screen. Two marks, both earned by real state.
08 · Settings · Agent defaults
Every control mapped exactly as in the direction: agent, model, effort, permission mode, fast mode, context window, overrides and filter. Model reads follow computer; no model name is invented.
C

Light, Chinese, and a real 200% collision

Same component, same routes, different runtime state.
09 · Fleet · light
Identical geometry; only the token set changes. Amber becomes #8A5A08, green #1F7A4D and red #A3311F so all three machine states hold their meaning against paper.
10 · Fleet · 简体中文
Fixed grammar localises — 电脑, 在线, 重新连接中, 离线, 配对新电脑. Computer names, paths and tool names stay literal, because they are data rather than copy.
11 · Review · 200% · tabs wrap
The tab row is pinned to the real 362 pt content box, so three 136 pt chips cannot fit and structurally wrap. Rows grow, targets go to 56, and no label is shrunk or clipped.
12 · Settings · 200% · light
Category rows grow to hold wrapped labels and their summaries. The title stays put and the list scrolls, so the fifth category sits below the fold rather than being shortened — no label is truncated and no target shrinks.
D

Field to copy

Field
Rendering rule
machine.name
Row title, verbatim, wraps on characters. An id-shaped name is set in monospace.
machine.os
Coarse enum only, as a quiet second line. Absent when not reported. Never a version.
machine.status
One of ONLINE, RECONNECTING, OFFLINE. Mark plus written word, always both.
activity | path
Monospace, only when present, wrapping rather than truncating.
lastSeen
Fallback line shown only when the machine is not online.
pendingCount
Semantic badge with an explicit accessible label. Hidden at zero, never “0”.
isCurrent
Outlined Current chip on the active machine alone.
request.*
Computer, tool, title, preview and elapsed. The full payload stays in the existing approval surface.
finished.success
Circle or square plus the backend's own result. Never inferred from elapsed time.
review.status
Queued, Delivered, In progress, Responded, Closed — printed as supplied, with no sixth or derived word.
✓

Behaviour preserved

01Allow and deny semantics unchanged, including the refusal returned to the agent.
02Received and sent detail, new review, invite, join, fingerprint and remove-contact all still reachable.
03Usage, Schedule, Shared Folders, Collaborators, Bridges, Review Center and Help open unchanged.
04No setting removed — only relocated into the five categories, controls intact.
05Capability gating preserved: unreported agents and modes are hidden, not greyed out.
06No protocol field, enum value, route or daemon call added anywhere in this master.
07No secret, token, key or fingerprint value printed in any summary.
08Every consequential control is a labelled button, focusable, and answers Enter and Space.
Not claimed anywhere
OS version · latency · health · battery
delivery inferred from elapsed time
a fourth machine state
invented model names or metrics